<template>
  <div>
    <!-- :initial-value="form.fileList" -->
    <UploadFile ref="UploadFile" :autoUpload="false" :autoUploadDisplay="false" :action-url="actionUrl" :params="params" @change="successHandler" @error="errorHandler" :fileTypes="['xls', 'xlsx']"
      >选取附件
    </UploadFile>
    <div style="text-align: center;margin: 10px;">
      <el-button size="small" @click="saveHandle" :loading="importLoading" type="primary">{{ title }}</el-button>
      <el-button size="small" @click="cancle" type="">关闭</el-button>
    </div>
    <div v-show="isFailed">
      <FilterTable ref="table" height="auto" maxHeight="300px" :columns="columns" :dataSource="errorList" :datakey="'records'" :isSelectColumn="false" :onColumnsChange="columns => (this.columns = columns)" style="margin-top: 10px">
      </FilterTable>
    </div>
    <div v-show="isSuccess">
      <FilterTable ref="table1" height="auto" maxHeight="300px" :columns="columns1" :dataSource="dataList" :datakey="'records'" :isSelectColumn="false" :onColumnsChange="columns => (this.columns = columns1)" style="margin-top: 10px">
        <template slot="controls">
          <AjaxButton size="small" type="primary" :click="confirmHandle">确定</AjaxButton>
        </template>
      </FilterTable>
    </div>
  </div>
</template>
<script>

import { dictionary } from '@/utils/dictMixin';
import { getToken, getAppId } from '@/assets/js/auth';
import axios, { getConfigHeaders } from '@/api/fetch';
import UploadFile from '@/components/UploadFile';
import { importConfirmSalesZone } from '@/api/cms-api/origin/originInfo/index.js';

export default {
  name: 'importFile',
  mixins: [dictionary],
  comments: {
    UploadFile
  },
  props: {
    title: {
      type: String,
      required: true
    },
    actionUrl: {
      type: String,
      required: true
    },
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // actionUrl:"/api/cluecenter/jk/clue/excelImportCheck",//导入校验
      // importUrl:"/api/cluecenter/jk/clue/importClueByExcel",//导入
      // updateUrl:"/api/cluecenter/jk/clue/excelUpdateCheck",//更新校验
      // actionUrl_upload:"/api/cluecenter/jk/clue/updClues",//更新
      columns: this.createTableColumns(),
      columns1: this.createTableColumns1(),
      errorList: [],
      dataList: [],

      isUpload: false,
      fileList: [],
      file: {},
      importLoading: false,
      isSuccess: false,
      isFailed: false,
    };
  },
  methods: {
    createTableColumns() {
      return [
        {
          title: 'excel表格行号',
          dataIndex: 'rowNO',
          filterType: 'input'
        },
        {
          title: '信息（错误/成功）',
          dataIndex: 'errorMsg',
          filterType: 'input'
        }
      ];
    },
    createTableColumns1() {
      return [
        {
          title: 'excel表格行号',
          dataIndex: 'rowNO',
          filterType: 'input',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '经销商附加id',
          dataIndex: 'dealerAttachId',
          filterType: 'input',
          hidden: true,
        },
        {
          title: '经销商代码',
          dataIndex: 'dealerCode',
          filterType: 'input'
        },
        {
          title: '省',
          dataIndex: 'provinceName',
          filterType: 'input'
        },
        {
          title: '省id',
          dataIndex: 'provinceId',
          filterType: 'input',
          hidden: true,
        },
        {
          title: '市',
          dataIndex: 'cityName',
          filterType: 'input'
        },
        {
          title: '市id',
          dataIndex: 'cityId',
          filterType: 'input',
          hidden: true,
        },
        {
          title: '区县',
          dataIndex: 'districtName',
          filterType: 'input'
        },
        {
          title: '区县id',
          dataIndex: 'districtId',
          filterType: 'input',
          hidden: true,
        },
      ];
    },
    successHandler(val) {
      if (val == 1) {
        this.importLoading = true;
      } else {
        this.importLoading = false;
        this.fileList = val;
        if (val && val.length > 0) {
          let response = val[0].response;
          if (response.data.errorList && response.data.errorList.length > 0) {
            this.isFailed = true;
            this.isSuccess = false;
            this.errorList = response.data.errorList;
          } else {
            this.isSuccess = true;
            this.isFailed = false;
            this.dataList = response.data.dataList;
            this.$notify.success(`文件${this.title}成功`);
          }
        } else {
          this.errorList = [];
        }
        if (val[0].status == 'success') {
          this.isUpload = true;
        }
      }
    },
    errorHandler(val) {
      this.importLoading = false;
      if ('导入' != this.title) {
        this.$notify.error('文件下载失败！');
      }
    },

    async saveHandle() {
      this.$refs.UploadFile.submitUpload();
      // console.log('===this.$refs.UploadFile.files==',this.$refs.UploadFile.files)
      // setTimeout(() => {
      //   console.log('===this.$refs.UploadFile==',this.$refs.UploadFile)
      //     if(this.$refs.UploadFile.fileList!=null && this.$refs.UploadFile.fileList.length>0){
      //       this.importLoading = true;
      //     }else{
      //       this.$message.error('请选择文件！');
      //     }
      //   }, 1000);
      // if(this.$refs.UploadFile.fileList!=null && this.$refs.UploadFile.fileList.length>0){
      //   this.importLoading = true;
      // }else{
      //   this.$message.error('请选择文件！');
      // }

      /*if(this.isUpload){
        let url = this.importUrl;
        let params = {
          clues:this.fileList.clue
        }
        const res = await axios.post(url, params);
        if (res.resultCode === 200) {
          this.$message.success(`文件${this.title}成功`);
          this.cancle()
        } else {
          this.errorHandle(res.errMsg);
        }
      }else{
        this.$message.error('请先上传正确的文件！');
      }*/
    },
    async confirmHandle(){
      const res = await importConfirmSalesZone(this.dataList);
      if(res.resultCode == 200){
        this.$notify.info('确认成功');
        this.isSuccess = false;
      }
    },
    cancle() {
      // this.$emit("close")
      this.$emit('close', this.fileList);
    },
    async downLoadByUrl(url, params = {}) {
      const { data } = await axios({ url, params });
      return data;
    }
  }
};
</script>
